<template>
    <div class="header">
        <div class="header-left">
            <span class="iconfont left-arrows">&#xe61c;</span>
        </div>
        <div class="header-input">
            <span class="iconfont search-icon">&#xe614;</span>
            输入城市/景点/游玩主题
        </div>
        <div class="header-right">城市
            <span class="iconfont down-arrows">&#xe611;</span>
        </div>
    </div>
</template>

<script>
export default {
    name:'HomeHeader'
}
</script>

<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .header
        display :flex
        height : 0.86rem
        line-height .86rem
        background : $bgColor
        color: white 
        .header-left
            width : .64rem
            float : left
            .left-arrows  
                margin-left :.15rem
        .header-input
            flex:1
            height : .64rem
            line-height : .64rem
            margin-top : .12rem
            background :white
            border-radius : .1rem
            color: #b5afaf
            .search-icon
                margin-left :.15rem
        .header-right
            float : right
            width : 1.24rem
            padding-left :.18rem
            box-sizing :border-box
</style>